<template>
  <div class="animated fadeIn">

    <Row class="Row1">
      <i-col :sm="24" :md="12">
        <h5 class="Row11Title">站内统计情况</h5>
      </i-col>
      <i-col :sm="24" :md="12"><p class="Row1DataTime">当前时间：{{dataTime}}</p></i-col>
    </Row>

    <stationTopInfo :stationCode="stationCode"></stationTopInfo>
    <echartsRow :stationCode="stationCode"></echartsRow>

    <Row class="Row3Background" style="padding: 15px;">
      <i-col>
        <Form ref="formParam" :model="formParam" label-position="right" inline>
          <Row>
            <i-col>
              <FormItem label="发出时间：">
                <DatePicker v-model="timeSlot.timeVal" type="daterange" :options="timeSlot.timeOptions" split-panels
                            placeholder="请选择时间段" format="yyyy年MM月dd日" style="width: 230px">
                </DatePicker>
              </FormItem>
              <FormItem label="到站：">
                <Select v-model="formParam.dzlm" multiple placeholder="多选" style="min-width:200px">
                  <Option v-for="item in DZLMlist" :value="item.condition1" :key="item.condition1">{{ item.condition2 }}</Option>
                </Select>
              </FormItem>
              <FormItem label="品名：">
                <Select v-model="formParam.zpmhz" multiple placeholder="多选" style="min-width:200px">
                  <Option v-for="item in pmList" :value="item.condition" :key="item.condition">{{ item.condition }}</Option>
                </Select>
              </FormItem>
              <Button type="primary" style="float: right" @click="handleSearch">搜索</Button>
              <Button type="text" v-if="!showAllFormItem" style="float: right;margin-right: 10px;" @click="shwoFrom">展开全部
                <Icon type="ios-arrow-down"/>
              </Button>
              <Button type="text" v-if="showAllFormItem" style="float: right;margin-right: 10px;" @click="shwoFrom">收起
                <Icon type="ios-arrow-up"/>
              </Button>
            </i-col>
          </Row>
          <Row v-if="showAllFormItem">
            <i-col>
              <FormItem label="发货人：">
                <Select v-model="formParam.fhrmc" multiple placeholder="多选" style="min-width:200px">
                  <Option v-for="item in fhrList" :value="item.condition" :key="item.condition">{{ item.condition }}</Option>
                </Select>
              </FormItem>
              <FormItem label="收货人：">
                <Select v-model="formParam.shrmc" multiple placeholder="多选" style="min-width:200px">
                  <Option v-for="item in shrList" :value="item.condition" :key="item.condition">{{ item.condition }}</Option>
                </Select>
              </FormItem>
              <FormItem label="车种：">
                <Select v-model="formParam.czcx" multiple placeholder="多选" style="min-width:200px">
                  <Option v-for="item in trainTypeList" :value="item.condition" :key="item.condition">{{ item.condition }}</Option>
                </Select>
              </FormItem>
              <FormItem label="业务类型：">
                <Select v-model="formParam.ysfwnr" multiple placeholder="多选" style="min-width:200px">
                  <Option v-for="item in transportTypeList" :value="item.val" :key="item.val">{{ item.label }}</Option>
                </Select>
              </FormItem>
            </i-col>
          </Row>
        </Form>
      </i-col>
    </Row>

    <Row class="Row3Background" style="padding: 15px;">
      <i-col>
        <tablePage ref="orderReportNewTab" :api="getDateByPage" :param="formParam" sort-name="FCSJ">
          <template slot-scope="props">
            <Table :columns="containerColumn" :data="props.data"></Table>
          </template>
        </tablePage>
      </i-col>
    </Row>

    <Row class="Row5 Row3Background">
      <i-col>
        <Row>
          <i-col style="padding: 15px;ont-size: 14px;color: #929292;">
            筛选结果总计 &nbsp;&nbsp;&nbsp;&nbsp;{{dataTime}}
          </i-col>
        </Row>
        <template>
          <Table :data="searchData" :columns="searchDataColumns" border></Table>
        </template>
        <Row>
          <i-col span="6" style="padding:15px;font-size: 18px;font-weight: 400;">重量总计：{{weightAll}}</i-col>
          <i-col span="6" style="padding:15px;font-size: 18px;font-weight: 400;">车数总计：{{trackTotal}}</i-col>
        </Row>
      </i-col>
    </Row>
  </div>
</template>
<script>
  import tablePage from '@components/table/tablePage.vue'
  import {getDateByPage, getQueryList, getQueriesList, getFilterStatisticsWeight} from '@api/stationReport'
  import moment from 'moment'
  import stationTopInfo from './components/stationTopInfo'
  import echartsRow from './components/echartsRow'
  import _ from 'lodash'

  export default {
    name: 'index',
    data () {
      let shrList = []
      let fhrList = []
      let showAllFormItem = false
      let stationCode = 'WBR'
      let stationList = []
      let pmList = []
      let trainTypeList = []
      let transportTypeList = [
        {label: '门到门', val: '1'},
        {label: '门到站', val: '2'},
        {label: '站到门', val: '3'},
        {label: '站到站', val: '4'}
      ]
      let DZLMlist = []
      let dataTime = moment().format('YYYY-MM-DD')
      let operatModal = {
        trackingShow: false
      }
      let timeSlot = {
        timeOptions: {
          shortcuts: [
            {
              text: '最近一周 ',
              value () {
                let end = new Date()
                let start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                return [start, end]
              }
            },
            {
              text: '最近一月',
              value () {
                let end = new Date()
                let start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                return [start, end]
              }
            },
            {
              text: '最近三个月',
              value () {
                let end = new Date()
                let start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                return [start, end]
              }
            }
          ]
        },
        timeVal: [moment().subtract(7, 'days').format('YYYY-MM-DD') + ' 00:00:00', moment().format('YYYY-MM-DD') + ' 00:00:00']
      }
      let trackName = []
      let weightAll = 0
      let formParam = {
        startSendTime: moment().subtract(7, 'days').format('YYYY-MM-DD') + ' 00:00:00',
        endSendTime: moment().format('YYYY-MM-DD') + ' 00:00:00',
        fzlm: ['WBR'],
        zpmhz: [],
        dzlm: [],
        czcx: [],
        ysfwnr: [],
        fhrmc: [],
        shrmc: []
      }
      let containerColumn = [
        {
          title: '货票号',
          key: 'hph',
          fixed: 'left',
          width: 100
        },
        {
          title: '车号',
          ellipsis: 'false',
          key: 'ch',
          width: 100
        },
        {
          title: '箱号',
          ellipsis: 'false',
          key: 'xh',
          width: 150
        },
        {
          title: '车种',
          ellipsis: 'false',
          key: 'czcx',
          width: 100
        },
        {
          title: '到站',
          ellipsis: 'false',
          key: 'dzmc',
          width: 100
        },
        {
          title: '发站',
          ellipsis: 'false',
          key: 'fzmc',
          width: 100
        },
        {
          title: '发出时间',
          width: 250,
          render: (h, params) => {
            let thisdata = params.row.fcsj
            thisdata = thisdata ? moment(thisdata).format('YYYY-MM-DD HH:mm') : ''
            return (<span>{thisdata}</span>)
          }
        },
        {
          title: '发货人',
          ellipsis: 'false',
          key: 'fhrmc',
          width: 200
        },
        {
          title: '收货人',
          ellipsis: 'false',
          key: 'shrmc',
          width: 200
        },
        {
          title: '品名',
          ellipsis: 'false',
          key: 'zpmhz',
          width: 100
        },
        {
          title: '货物重量',
          ellipsis: 'false',
          key: 'zzl',
          width: 100
        },
        {
          title: '发站接取费(元）',
          ellipsis: 'false',
          key: 'fjqsdf',
          width: 100
        },
        {
          title: '到站送达费(元）',
          ellipsis: 'false',
          key: 'djqcdf ',
          width: 100
        },
        {
          title: '业务类型',
          ellipsis: 'false',
          key: 'ysfwnr',
          width: 100,
          render: (h, params) => {
            let transportType = params.row.ysfwnr
            let transportTypeW = ''
            if (transportType === 1) {
              transportTypeW = '门到门'
            } else if (transportType === 2) {
              transportTypeW = '门到站'
            } else if (transportType === 3) {
              transportTypeW = '站到门'
            } else if (transportType === 4) {
              transportTypeW = '站到站'
            }
            return (<span>{transportTypeW}</span>)
          }
        }
      ]
      let searchData = []
      let searchDataColumns = []
      let FZLMlist = []
      let trackTotal = 0
      let datas = {
        trainTypeList,
        stationCode,
        transportTypeList,
        DZLMlist,
        FZLMlist,
        dataTime,
        operatModal,
        containerColumn,
        getDateByPage,
        timeSlot,
        trackName,
        pmList,
        stationList,
        showAllFormItem,
        formParam,
        shrList,
        fhrList,
        searchData,
        searchDataColumns,
        weightAll,
        trackTotal
      }
      return datas
    },
    methods: {
      shwoFrom () {
        this.showAllFormItem = !this.showAllFormItem
      },
      showTracking (row) {
        this.mainOrderCurrentRow = row
        this.operatModal.trackingShow = true
      },
      handleSearch () {
        this.$refs['orderReportNewTab'].dataRefresh()
        getFilterStatisticsWeight(this.formParam).then(res => {
          if (res.data.isSuccess === 1) {
            this.buildColumns(res.data.data)
          }
        })
      },
      buildColumns (dataSouce) {
        let weightAll = 0
        let rebuidData = []
        let CountList = []
        let trackTotal = 0
        _.forEach(dataSouce, (item) => {
          weightAll = weightAll + item.zzl
          trackTotal = trackTotal + item.total
          if (item.fzlm) {
            let fzmc = _.find(this.FZLMlist, (item2) => {
              return item2.condition1 === item.fzlm
            })
            if (fzmc) {
              item.fzmc = fzmc.condition2
            }
          }
          if (item.dzlm) {
            let dzmc = _.find(this.DZLMlist, (item2) => {
              return item2.condition1 === item.dzlm
            })
            if (dzmc) {
              item.dzmc = dzmc.condition2
            }
          }
          rebuidData.push(item)
        })
        this.searchData = rebuidData
        const Columns = {
          zzl: {
            title: '重量',
            key: 'zzl'
          },
          total: {
            title: '车数',
            key: 'total'
          },
          fzmc: {
            title: '发站名称',
            key: 'fzmc'
          },
          dzmc: {
            title: '到站名称',
            key: 'dzmc'
          },
          zpmhz: {
            title: '品名',
            key: 'zpmhz'
          },
          fhrmc: {
            title: '发货人名称',
            key: 'fhrmc'
          },
          shrmc: {
            title: '收货人名称',
            key: 'shrmc'
          },
          czcx: {
            title: '车种',
            key: 'czcx',
            width: 100
          },
          ysfwnr: {
            title: '业务类型',
            key: 'ysfwnr',
            render: (h, params) => {
              let transportType = params.row.ysfwnr
              let transportTypeW = ''
              if (transportType === 1) {
                transportTypeW = '门到门'
              } else if (transportType === 2) {
                transportTypeW = '门到站'
              } else if (transportType === 3) {
                transportTypeW = '站到门'
              } else if (transportType === 4) {
                transportTypeW = '站到站'
              }
              return (<span>{transportTypeW}</span>)
            }
          },
          fjqsdf: {
            title: '发接取送达费（元）',
            key: 'fjqsdf'
          },
          djqsdf: {
            title: '到接取送达费（元）',
            key: 'djqsdf'
          }
        }
        _.forIn(dataSouce[0], (itme, key) => {
          if (Columns[key]) {
            CountList.push(Columns[key])
          }
        })
        this.searchDataColumns = CountList
        this.weightAll = weightAll
        this.trackTotal = trackTotal
      },
      getAllPageDatas () {
        let pm = 'ZPMHZ'
        getQueryList({query: pm}).then(res => {
          if (res.data.isSuccess === 1) {
            this.pmList = res.data.data
          }
        })
        let stationQuery = {
          query1: 'DZLM',
          query2: 'DZMC'
        }
        getQueriesList(stationQuery).then(res => {
          if (res.data.isSuccess === 1) {
            this.DZLMlist = res.data.data
          }
        })
        let stationQueryFz = {
          query1: 'FZLM',
          query2: 'FZMC'
        }
        getQueriesList(stationQueryFz).then(res => {
          if (res.data.isSuccess === 1) {
            this.FZLMlist = res.data.data
          }
        })
        let cz = 'CZCX'
        getQueryList({query: cz}).then(res => {
          if (res.data.isSuccess === 1) {
            this.trainTypeList = res.data.data
          }
        })
        let shr = 'SHRMC'
        getQueryList({query: shr}).then(res => {
          if (res.data.isSuccess === 1) {
            this.shrList = res.data.data
          }
        })
        let fhr = 'FHRMC '
        getQueryList({query: fhr}).then(res => {
          if (res.data.isSuccess === 1) {
            this.fhrList = res.data.data
          }
        })
      }
    },
    watch: {
      'timeSlot.timeVal': function (val, oldval) {
        if (val && val[0] && val[1]) {
          this.formParam.startSendTime = moment(val[0]).format('YYYY-MM-DD') + ' 00:00:00'
          this.formParam.endSendTime = moment(val[1]).format('YYYY-MM-DD') + ' 23:59:59'
        } else {
          delete this.formParam.startSendTime
          delete this.formParam.endSendTime
        }
      }
    },
    mounted () {
      this.getAllPageDatas()
      this.handleSearch()
      window.onresize = function temp () {
        location.reload()
      }
    },
    computed: {},
    components: {tablePage, stationTopInfo, echartsRow}
  }
</script>
<style type="text/css" scoped>
  .Row1 {
    margin-bottom: 15px;
  }

  .Row11Title {
    font-size: 14px;
    color: #5E5E5E;
  }

  .Row1DataTime {
    text-align: right;
    color: #aaa;
  }

  .Row3Background {
    background-color: #fff;
  }

  .Row5 {
    margin: 15px auto;
  }
</style>